<template>
	<div class="table-index">
		<el-table :data="tableData" ref="tableIndex" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55"  align="center"></el-table-column>
			<el-table-column type="index" label="序号" align="center"></el-table-column>
			<el-table-column :label="tableLabel.one" align="center" :prop="tableProps.one">
			</el-table-column>
			<el-table-column :label="tableLabel.two" align="center" :prop="tableProps.two">
			</el-table-column>
			<el-table-column :prop="tableProps.three" :label="tableLabel.three" align="center">
			</el-table-column>
			<el-table-column :prop="tableProps.four" :label="tableLabel.four" align="center">
			</el-table-column>
			<el-table-column :prop="tableProps.five" :label="tableLabel.five" align="center" v-if="tableLabel.five">
			</el-table-column>
			<el-table-column :prop="tableProps.six" :label="tableLabel.six" align="center" v-if="tableLabel.six">
			</el-table-column>
			<el-table-column :prop="tableProps.seven" :label="tableLabel.seven" align="center" v-if="tableLabel.seven">
			</el-table-column>
			<el-table-column :label="tableLabel.eight" align="center" v-if="tableLabel.eight">
				<template slot-scope="scope">
					<div v-if="tableType == '账户'">
						<el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
						<el-tag type="danger" v-else>禁止</el-tag>
					</div>
					<div v-if="tableType == '选举管理基本'">
						<el-tag type="primary" v-if="scope.row.status == 1">未开始</el-tag>
						<el-tag type="success" v-else-if="scope.row.status == 2">进行中</el-tag>
						<el-tag type="info" v-else>已结束</el-tag>
					</div>
					
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300" align="center" v-if="tableType !='模态框'">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click.stop="viewEvent(scope.row)">查看</el-button>
					<div v-if="tableType == '账户'">
						<el-button size="mini" :type="scope.row.status == 1 ? 'danger' :'success'"  @click.stop="statusEvent(scope.row)">{{scope.row.status == 1 ? '禁止' :'正常'}}</el-button>
					</div>
					<div v-if="tableType == '选举管理基本'">
						<el-button size="mini" :type="scope.row.status == 3 ? 'info' :'success'"  @click.stop="EditEvent(scope.row)">编辑</el-button>
					</div>
					
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :page-size="pagination.pageSize" @current-change="currentChange" :current-page="pagination.pageNumber" prev-text="上一页" next-text="下一页" style="margin-top: 50px;"
		 :page-sizes="pagination.pageSizes" :total="pagination.totalRows" :layout="pagination.layout" @size-change='sizeChange'>
		</el-pagination>
	</div>
</template>

<script>
	import { handlePageTable } from "utils/mixins";
	import { get_table_list } from "api/table"
	
	export default {
		mixins: [handlePageTable],
		props: ['tableLabel', 'tableType','tableUrl','tableProps','filterParams'],
		data(){
			return{
				pagination: {
				  totalRows: 0, //总条数
				  pageSize: 15, //每页显示条数
				  pageSizes: [15, 20, 50],
				  pageNumber: 1,
				  layout: "total, sizes, prev, pager, next, jumper"
				},
				tableData:[],
				multipleSelectionAll: [], // 所有选中的数据包含跨页数据
				multipleSelection: [], // 当前页选中的数据
				idKey: "id", // 标识列表数据中每一行的唯一键的名称
				methodUrl:'',
				listQuery:{
					page:1,
					page_size:15,
					name:'',
					create_start_datetime:'',
					create_end_datetime:'',
					phone:'',
					organization_id:''
				},
				
			}
		},
		methods: {
			handleSelectionChange(val) {
                 this.multipleSelection = val; 
			},
			viewEvent(row){
				this.$emit('viewEvent',{type:'view',id:row.id})
			},
			statusEvent(row){
				this.$emit('statusEvent',{type:'view',id:row.id})
			},
			EditEvent(row){
				this.$emit('editEvent',{type:'edit',id:row.id,status:row.status})
			},
			/* 接口数据 url 接口url */
			getLists(url){
				
				this.listQuery.is_online  = this.tableType == '本地数据' ? 1 : ''
                get_table_list(url,this.listQuery).then(response => {
					 this.tableData = response.data.data.data;
					 this.pagination.totalRows =  response.data.data.total;
					 setTimeout(() => {
					   this.setSelectRow();
					 }, 20);
					 
				 }).catch(err => {
					  this.$message.error(err)
				});
			},
			/* t头部筛选事件 */
			filterSearch(){
				let params = this.filterNotEmptyParams(this.filterParams)
				console.log(params);
				this.listQuery = {
					page:this.pagination.pageNumber,
					page_size:this.pagination.pageSize,
					name:params.name ? params.name: '',
					create_start_datetime:params.date ? params.date[0] : '',
					create_end_datetime:params.date ? params.date[1] : '',
					phone:params.phone ? params.phone : '',
					organization_id:params.organization_id ? params.organization_id : '',
					meeting_name:params.meeting_name ? params.meeting_name : '',
					start_time:params.meeting_date ? params.meeting_date[0] : '',
					end_time:params.meeting_date ? params.meeting_date[1] : '',
					compere_name:params.compere_name ? params.compere_name : '',
				}
				this.getLists(this.methodUrl)
			},
			
			filterNotEmptyParams(obj){
			    let _newPar = {};
			    for (let key in obj) {
			        //如果对象属性的值不为空，就保存该属性（这里我做了限制，如果属性的值为0，保存该属性。如果属性的值全部是空格，属于为空。）
			        if ((obj[key] === 0 || obj[key]) && obj[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') {
			            //记录属性
			            _newPar[key] = obj[key];
			        }
			    }
			    //返回对象
			    return _newPar;
			}
			
			
		},
		created(){
			this.pagination.pageNumber = 1
			// this.getLists()
		},
		watch:{
			'multipleSelection':{
				handler(){
					 this.changePageCoreRecordData();
					 this.$emit('getAllSelectionData',this.multipleSelectionAll)
					 // console.log(this.multipleSelectionAll);
				}
			},
			'tableUrl':{
				handler(val){
					this.methodUrl = val;
					this.getLists(val)
				},
				immediate: true,
				deep: true
			}
		}
	}
</script>

<style lang="scss">
	@include component(table-index) {
		margin-top: rem(21);
		.cell{
			@extend %flex-center;
			.el-button{
				margin-right: rem(5);
			}
		}
	}
</style>
